<template>
  <Container class="job-detail-banner-container" bg-color="#36434D">
    <div class="content">
      <template v-if="data">
        <div class="header">
          <div class="name">{{ data?.title }}</div>
          <div class="local">
            <i class="iconfont icon-local"></i>
            <span>{{ data?.address_title }}</span>
          </div>
          <div class="salary">{{ data?.salary_title }}</div>
        </div>
        <div class="tag">
          <span>{{ data?.work_title }}</span>
          <span>{{ data?.cat_title }}</span>
          <span>{{ data?.edu_title }}</span>
          <span>{{ data?.tag_title }}</span>
        </div>
        <div class="salary">{{ data?.salary_title }}</div>
        <div class="footer">
          <div
            class="btn btn-default color-white"
            :class="isCollect ? 'collect' : ''"
            @click="onClickCollectBtn"
          >
            <i class="iconfont icon-star active"></i>
            <div v-if="isCollect">{{ $t("btnText.collected") }}</div>
            <div v-else>
              {{ $t("btnText.collect") }}
            </div>
          </div>
          <div @click="applyJob" class="btn btn-primary">
            <svg
              t="1726667603326"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4440"
              width="16"
              height="16"
            >
              <path
                d="M880.64 204.8h-737.28A61.44 61.44 0 0 0 81.92 265.0112v493.9776a61.44 61.44 0 0 0 18.0224 43.4176 59.8016 59.8016 0 0 0 41.7792 16.7936h737.28a61.44 61.44 0 0 0 61.44-61.44v-491.52A61.44 61.44 0 0 0 880.64 204.8z m0 573.44h-737.28a20.8896 20.8896 0 0 1-20.48-20.48V341.1968l358.8096 206.848a58.9824 58.9824 0 0 0 61.44 0L901.12 341.1968v417.792a20.48 20.48 0 0 1-20.48 19.2512zM901.12 294.0928l-378.88 218.7264a20.48 20.48 0 0 1-20.48 0L122.88 294.0928v-29.0816A20.48 20.48 0 0 1 143.36 245.76h737.28a20.48 20.48 0 0 1 20.48 20.48v26.624z"
                p-id="4441"
                fill="#36434D"
              ></path></svg
            ><span>{{ $t("btnText.apply_position") }}</span>
          </div>
        </div>
        <div class="divider-line"></div>
      </template>
      <template v-else>
        <div class="pc-skeleton">
          <Skeleton width="25%" pc></Skeleton>
          <div class="tag">
            <Skeleton width="40%" pc></Skeleton>
          </div>
          <Skeleton width="15%" pc></Skeleton>
          <div class="footer">
            <Skeleton width="140px" height="48px" radius="12px"></Skeleton>
            <Skeleton width="140px" height="48px" radius="12px"></Skeleton>
          </div>
        </div>
        <div class="mobile-skeleton">
          <div class="header">
            <Skeleton width="30%" mobile></Skeleton>
            <Skeleton width="20%" mobile></Skeleton>
          </div>
          <div class="tag">
            <Skeleton width="50%" mobile></Skeleton>
          </div>
          <div class="footer">
            <Skeleton width="850px" height="246px" radius="61px"></Skeleton>
            <Skeleton width="850px" height="246px" radius="61px"></Skeleton>
          </div>
        </div>
      </template>
    </div>
  </Container>
  <DialogService ref="dialogServiceDialog" :submit_id="talentId"></DialogService>
  <DialogMobileService
    ref="dialogMobileServiceDialog"
    :submit_id="talentId"
  ></DialogMobileService>
</template>

<script setup lang="ts">
import type { TalentDetail } from "../../../types/talent";
import { postTalentCollect } from "../../../api/talent";
import { useRoute } from "vue-router";
import { message } from "ant-design-vue";
import { ref, computed, onMounted, getCurrentInstance, nextTick } from "vue";
import { useMemberStore } from "../../../store";

const dialogServiceDialog = ref();
const dialogMobileServiceDialog = ref();
const $t = getCurrentInstance()?.appContext.config.globalProperties.$t;

const props = defineProps<{
  data?: TalentDetail;
}>();
const route = useRoute();
const emits = defineEmits(["collect-change"]);
// 收藏按钮点击
let collectTimer: number | null = null;
const onClickCollectBtn = async () => {
  if (collectTimer) return;
  collectTimer = setTimeout(() => {
    collectTimer = null;
  }, 800);
  // let member_id = 1;
  let res = await postTalentCollect({ id: route.query.id }); // member_id
  if (res.code === 201) {
    emits("collect-change");
    message.success(res.msg);
  } else if (res.code === 202) {
    emits("collect-change");
    message.success(res.msg);
  } else {
    message.error(res.msg);
  }
};
const isCollect = computed(() => {
  return props.data!.is_collect === "no" ? false : true;
});

const memberStore = useMemberStore();

const talentId = ref();
const applyJob = () => {
  if (!memberStore.profile) {
    message.warning($t("message.wait_login"));
    return;
  }
  talentId.value = route.query.id;
  nextTick(() => {
    if (isMobile()) {
      dialogMobileServiceDialog.value.show();
    } else {
      dialogServiceDialog.value.show();
    }
  });
};
</script>
<style scoped lang="less">
.footer {
  display: flex;
  margin-top: 24px;
  gap: 16px;
  .btn-default {
    color: #fff;
    &.collect {
      color: #ffaf40;
      border-color: #ffaf40;
    }
  }
  .btn-primary {
    gap: 8px;
    svg * {
      fill: #fff;
    }
    svg {
      width: 20px;
      height: 20px;
    }
  }
}
.header {
  color: #fff;
  display: flex;
  align-items: center;
  .name {
    font-size: 24px;
    margin-right: 16px;
  }
  .local {
    i {
      font-size: 20px;
      margin-right: 4px;
    }
    span {
      position: relative;
      top: -1.5px;
    }
    font-size: 16px;
  }
  .salary {
    display: none;
  }
}
.tag {
  margin: 24px 0;
  display: flex;
  gap: 16px;
  color: #fff;
  font-size: 16px;
  span {
    background: rgba(255, 255, 255, 0.1);
    padding: 8px 16px;
    border-radius: 6px;
  }
}
.salary {
  font-size: 24px;
}
.divider-line {
  display: none;
}

@media screen and (max-width: 768px) {
  .job-detail-banner-container {
    background-color: #fff !important;
  }
  .content {
    padding-top: 82px;
    .salary {
      display: none;
    }
    .divider-line {
      display: block;
    }
  }
  .header {
    color: #172026;
    justify-content: space-between;
    .name {
      font-size: 92px;
    }
    .local {
      display: none;
    }
    .salary {
      display: block;
      font-size: 82px;
    }
  }
  .tag {
    color: #36434d;
    font-size: 61px;
    span {
      background: #f5f8fa;
      padding: 20px 41px;
      border-radius: 31px;
    }
  }
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 369px;
    z-index: 9;
    background-color: #fff;
    padding: 82px;
    padding-top: 41px;
    border-top: 3px solid #e6edf2;
    gap: 56px;
    .btn {
      width: 850px;
      height: 246px;
      border-radius: 61px;
      i,
      svg {
        display: none;
      }
    }
    .btn-default {
      color: #36434d;
      background-color: #e6edf2;
      border-color: transparent;
      &.collect {
        background: #ffaf40;
        color: #fff;
      }
    }
  }
}
</style>
